@rem:10rem;

.searchbox{
	.head{


		.searchtext{
			margin-top: 20/@rem;
		}

		.searchinfo{

			margin: 20/@rem 0;

			.keytext{
				display: inline-block;
				width: 76%;
				padding-left: 2%;
				border: 1px solid #dad8d8;
				border-radius: 6/@rem;
				box-sizing: border-box;
			}
			.so{

			}
			.del{

			}
			.searchbtn{
				width: 20%;
				display: inline-block;
				background: #000;
				color: #fff;
				border-radius: 6/@rem;
				text-align: center;
				margin-left: 2%;
				vertical-align: middle;
				cursor: pointer;
			}

			.searchbtn,.keytext{
				height: 24/@rem;
				line-height: 24/@rem;
			}
		}
	}




	.listbox{
		color: #555;

		.list{
			padding-top: 5/@rem;

			.item{
				position: relative;
				padding-top: 5/@rem;
				padding-bottom: 5/@rem;

				.clickarea{
					text-decoration: none;
					display: block;
					color: #555;

					.contenthead{
						display: flex;
						box-pack:justify;
					    align-items: center;
					    justify-content: space-between;


						.title{
							flex:1;
							font-size: 14/@rem;
							text-decoration: none;
							color: #555;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							font-weight: 400;
						}

						.tag{
							padding-left: 10/@rem;
							font-size: 12/@rem;
						}
					}

					.content{
						text-indent:2em;
						-webkit-line-clamp: 3;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-box-orient: vertical;
						display: -webkit-box;
						margin: 4/@rem 0;
					}
					.information{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 12/@rem;
					}
					
					&::after{
						content:"";
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						height: 1px;
						background: #e0dcdc;
						transform: scaleY(.5);
					}
				}
			}
		}
		
		.bottominfo{
			color: #000;
			padding: 10px 0px;
			text-align: center;
			font-size: 14/@rem;
			font-weight: 200;
		}


		.loader{
		    height: 50px;
		    text-align: center;
		    padding: 5px;
		}

		.pacman>div:first-of-type,.pacman>div:nth-child(2) {
		    width: 0;
		    height: 0;
		    border-right: 25px solid transparent;
		    border-top: 25px solid #000;
		    border-left: 25px solid #000;
		    border-bottom: 25px solid #000;
		    border-radius: 25px;
		    position: relative;
		}

		@-webkit-keyframes rotate_pacman_half_up {
		    0%,100% {
		        -webkit-transform: rotate(270deg);
		        transform: rotate(270deg)
		    }

		    50% {
		        -webkit-transform: rotate(360deg);
		        transform: rotate(360deg)
		    }
		}

		@keyframes rotate_pacman_half_up {
		    0%,100% {
		        -webkit-transform: rotate(270deg);
		        transform: rotate(270deg)
		    }

		    50% {
		        -webkit-transform: rotate(360deg);
		        transform: rotate(360deg)
		    }
		}

		@-webkit-keyframes rotate_pacman_half_down {
		    0%,100% {
		        -webkit-transform: rotate(90deg);
		        transform: rotate(90deg)
		    }

		    50% {
		        -webkit-transform: rotate(0);
		        transform: rotate(0)
		    }
		}

		@keyframes rotate_pacman_half_down {
		    0%,100% {
		        -webkit-transform: rotate(90deg);
		        transform: rotate(90deg)
		    }

		    50% {
		        -webkit-transform: rotate(0);
		        transform: rotate(0)
		    }
		}

		@-webkit-keyframes pacman-balls {
		    75% {
		        opacity: .7
		    }

		    100% {
		        -webkit-transform: translate(-100px,-6.25px);
		        transform: translate(-100px,-6.25px)
		    }
		}

		@keyframes pacman-balls {
		    75% {
		        opacity: .7
		    }

		    100% {
		        -webkit-transform: translate(-100px,-6.25px);
		        transform: translate(-100px,-6.25px)
		    }
		}

		.pacman {
		    position: relative;
		    display: inline-block;
		}

		.pacman>div:nth-child(3) {
		    -webkit-animation: pacman-balls 1s -.66s infinite linear;
		    animation: pacman-balls 1s -.66s infinite linear
		}

		.pacman>div:nth-child(4) {
		    -webkit-animation: pacman-balls 1s -.33s infinite linear;
		    animation: pacman-balls 1s -.33s infinite linear
		}

		.pacman>div:nth-child(5) {
		    -webkit-animation: pacman-balls 1s 0s infinite linear;
		    animation: pacman-balls 1s 0s infinite linear
		}

		.pacman>div:first-of-type {
		    -webkit-animation: rotate_pacman_half_up .5s 0s infinite;
		    animation: rotate_pacman_half_up .5s 0s infinite
		}

		.pacman>div:nth-child(2) {
		    -webkit-animation: rotate_pacman_half_down .5s 0s infinite;
		    animation: rotate_pacman_half_down .5s 0s infinite;
		    margin-top: -50px
		}

		.pacman>div:nth-child(3),.pacman>div:nth-child(4),.pacman>div:nth-child(5),.pacman>div:nth-child(6) {
		    background-color: #000;
		    border-radius: 100%;
		    margin: 2px;
		    width: 10px;
		    height: 10px;
		    position: absolute;
		    -webkit-transform: translate(0,-6.25px);
		    transform: translate(0,-6.25px);
		    top: 25px;
		    left: 100px
		}
	}
}












